<template>
	<view class="yg">
		<!-- 搜索组件 -->
		<search></search>
		<!-- 首页轮播图 -->
		<view>
			<swiper class="yg-swiper" indicator-dots="ture" autoplay="ture" interval="2000">
				<swiper-item v-for="(item,index) in swiperData" :key="item.goods_id">
					<navigator :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 首页导航 -->
		<view class="yg-navs">
			<!-- navigator uni.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 -->
			<navigator url='/pages/category/category' open-type="switchTab" v-for="(item,index) in navs"
				:key='item.image_src' class="yg-navs-item">
				<image :src="item.image_src"></image>
			</navigator>
		</view>
		<!-- 首页图片列表 -->
		<view class="yg-pics">
			<view class='yg-pics-item' v-for="(item,index) in floorData" :key="index">
				<view class="pics-item-title">
					<image :src="item.floor_title.image_src"></image>
				</view>
				<view class="pics-item-list">
					<navigator v-for="(v,i) in item.product_list" :key="v.image_src" :url="v.nacigator_url"
						class="item-list-i">
						<image :src="v.image_src"></image>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import search from '@/components/search.vue'
	import {
		request
	} from "@/request/request.js"
	export default {
		components: {
			"search": search
		},
		async created() {
			// 获取首页轮播图数据
			let res = await request({
				url: "home/swiperdata"
			})
			//获取首页导航栏数据 
			let res1 = await request({
				url: 'home/catitems'
			})

			// 获取首页图片列表
			let res2 = await request({
				url: "home/floordata"
			})
			console.log(res2)
			this.floorData = res2.message;
			res2.message.map(v => {
				v.product_list.map(v => {
					v.navigator_url = '/pages/goods_list/goods_list?' + v.navigator_url.split("?")[1];
				})
			})
			this.navs = res1.message;
			this.swiperData = res.message;
		},
		data() {
			return {
				swiperData: [],
				navs: [],
				floorData: []
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.yg {
		.yg-swiper {
			height: 340rpx;

			swiper {
				height: 340rpx;
			}

			swiper-item {
				height: 340rpx;

				navigator {
					height: 340rpx;
				}
			}
		}

		.yg-navs {
			display: flex;

			.yg-navs-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 128rpx;
					height: 140rpx;
				}
			}
		}

		.yg-pics {
			.yg-pics-item {
				.pics-item-title {
					image {
						height: 60rpx;
					}
				}
			}

			.pics-item-list {
				// 清除浮动
				overflow: hidden;
				margin-bottom: 20rpx;
				navigator {
					float: left;

					image {
						width: 100%;
						height: 100%;
					}

					&:nth-child(1) {
						margin-left: 16rpx;
						height: 386rpx;
						width: 232rpx;
					}
					&:nth-child(2),
					&:nth-child(4) {
							margin-left: 15rpx;
							height: 188rpx;
							width: 233rpx;
					}
					&:nth-child(3),
					&:nth-child(5) {
							margin-left: 15rpx;
							height: 188rpx;
							width: 223rpx;
					}
					&:nth-child(3),
					&:nth-child(2) {
							margin-bottom: 10rpx;
					}

				}
			}
		}
	}
</style>
